<template>
    <div class="ProductSwiper">
        <div class="ProductSwiper-container">
            <el-carousel :interval="4000" arrow="always" type="card" height="500px">
                <el-carousel-item v-for="(item, index) in list" :key="index">
                    <div class="swiper-card">
                        <header>
                            <figure>
                                <img :src="item.img" alt="" />
                            </figure>
                            <dl>
                                <dt>
                                    <h2 v-text="item.name"></h2>
                                </dt>
                                <dd>
                                    <p v-text="item.platform"></p>
                                </dd>
                                <dd>
                                    <img v-for="i in item.grade" :key="i" src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="" />
                                </dd>
                            </dl>
                        </header>
                        <article v-text="item.content"></article>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div></div>
        </div>
        <!-- <div class="ProductSwiper-container"></div> -->
    </div>
</template>
<script>
// "https://img.podpartner.com/static/images-20230202/swiper-header5.png"
const SwiperOptions = [
    {
        img: "https://img.podpartner.com/static/images-20230202/swiper-header1.png",
        name: "Lorna",
        platform: "Shopify",
        grade: 5,
        content:
            "PodPartner greatly meets our needs for customized clothes. It is convenient for us to distribute some customized T-shirts to our audience.",
    },
    {
        img: "https://img.podpartner.com/static/images-20230202/swiper-header2.png",
        name: "Daniel",
        platform: "Etsy",
        grade: 5,
        content:
            "PodPartner has brought a huge profit increase to our company.PodPartner can always provide the best commodity prices and stable delivery. We are very grateful to PodPartner!",
    },
    {
        img: "https://img.podpartner.com/static/images-20230202/swiper-header3.png",
        name: "Sabrina",
        platform: "Shopify",
        grade: 5,
        content:
            "What impressed me the most was the customer service of PodPartner. They answered the relevant information about the platform and operation very enthusiastically.",
    },
    {
        img: "https://img.podpartner.com/static/images-20230202/swiper-header4.png",
        name: "Brandon",
        platform: "Commerce",
        grade: 5,
        content:
            "PodPartner is very fast from order placement to final delivery. Our customers often only need a few days to receive these Print on Demand products. Customers are very satisfied with our products.",
    },
    {
        img: "https://img.podpartner.com/static/images-20230202/swiper-header5.png",
        name: "Alexandra",
        platform: "Shopify",
        grade: 5,
        content:
            "PodPartner platform charges extremely low prices based on providing satisfactory clothes quality. In the cooperation with PodPartner, we are often surprised by their efficient and stable delivery.",
    },
];
export default {
    name: "ProductSwiper",
    components: {},
    data () {
        return {
            active: 0,
            list: SwiperOptions,
            swiperTime: null,
            item: SwiperOptions[0],
        };
    },
    methods: {
        // swiperList() {
        //   var ele = document.getElementById("swiperWrap");
        //   var len = list.length;
        //   if (len > 1) {
        //     // 列表项大于1时，才做swiper动画。
        //     list.push(list[0]); // 这里是模拟，在dom元素的末尾，添加列表第一项，真实需要自己做dom操作。
        //     var cur = 0;
        //     var swpier = function (delay) {
        //       swiperTime = setTimeout(function () {
        //         cur += 1;
        //         if (cur > len) {
        //           // 这时表示到了最后一个复制块，直接无动画移动到真实的第一个元素
        //           cur = 0;
        //           ele.style.transition = "none";
        //           ele.style.transform = "translateY(0)";
        //           swpier(1000);
        //         } else {
        //           var top = -45 * cur;
        //           ele.style.transform = "translateY(" + top + "px)";
        //           ele.style.transition = "all 1s";
        //           cur === len ? swpier(1000) : swpier(2000); // 如果是最后一个复制块，间隔时间需要修改，加上最上面的替换块，合计2s。
        //         }
        //       }, delay);
        //     };
        //     swpier(2000);
        //   }
        // },
    },
    computed: {},
    created () { },
};
</script>
<style lang="scss" scoped>
.swiper-card {
    transition: transform 0.4s ease-in-out;
    transform: translateX(0px);
    width: 480px;
    height: 360px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #f2f2f2;
    padding: 32px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    > header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        > figure {
            width: 72px;
            height: 72px;
            margin-right: 24px;
            border-radius: 50%;
            overflow: hidden;
        }
        dl {
            h2 {
                font-size: 36px;

                font-weight: bold;
                color: #000000;
                line-height: 42px;
                margin-bottom: 8px;
            }
            p {
                width: 240px;
                height: 17px;
                font-size: 16px;

                color: #555555;
                line-height: 18px;
                margin-bottom: 12px;
            }
            dd {
                img {
                    width: 22px;
                    height: 22px;
                    margin-right: 8px;
                }
            }
        }
    }
    > article {
        margin-top: 24px;
        flex-grow: 1;
        width: 400px;
        font-size: 20px;

        color: #484848;
        line-height: 28px;
    }
}
.ProductSwiper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img {
        width: 100%;
        height: 100%;
    }
    .ProductSwiper-container {
        display: flex;
        flex-direction: row;
    }
}
.swiper-img {
    width: 480px;
    height: 340px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #f2f2f2;
}
::v-deep {
    .el-carousel__mask {
        background-color: transparent;
    }
    .el-carousel {
        width: 1200px;
    }
    .el-carousel__item {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .el-carousel__indicator.is-active {
        .el-carousel__button {
            background: #666666;
        }
    }
    .el-carousel__button {
        width: 12px;
        height: 12px;
        background: #c6c6c6;
        border-radius: 50%;
    }
    .el-carousel__arrow {
        top: auto;
        bottom: -52px;
        width: 34px;
        height: 34px;
        background: #ffffff;
        border: 1px solid #f2f2f2;
        color: #000;
        font-size: 18px;
        z-index: 1;
        &:hover {
            opacity: 0.5;
        }
    }
    .el-carousel__arrow--left {
        .el-icon-arrow-left:before {
            line-height: 32px;
        }
        left: 480px;
    }
    .el-carousel__arrow--right {
        .el-icon-arrow-right:before {
            line-height: 32px;
        }
        right: 480px;
    }
}
</style>
